<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <script src="${pageContext.request.contextPath}/script/jquery-1.11.3.js"></script>
	<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/script/shoppingCarJs2.js"></script>
    <script type="text/javascript">
	    /* 导航条 */
	    $(window).scroll(function () {
	        if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
	        }else {$(".navbar-fixed-top").removeClass("top-nav");}
	    });
        $(function(){
        	/* 增加地址  开始*/
            var ycy_mc_addbtn_isopen=false;
            $(".ycy-mc-address-addbtn>button").click(function(){
                if(ycy_mc_addbtn_isopen){
                    $(".ycy-mc-address-add").slideUp(500);
                    ycy_mc_addbtn_isopen=false;
                }else{
                    $(".ycy-mc-address-add").slideDown(500);
                    ycy_mc_addbtn_isopen=true;
                }
            });
            /* 增加地址  结束*/
            
            /* 选择地区 显示对应街道*/
            $("#area").change(function(){
				var valId=$("#area option:selected").val();
				$.getJSON("queryStreetList",{areaId:valId},function(json){
					var streetList = json["streetList"];
					$("#street").empty();
					for(var i = 0;i<streetList.length;i++){
						var line="<option value='"+streetList[i]['strId']+"'>"+streetList[i]['streetName']+"</option>";
						$("#street").append(line);
					}
				});
			});
           
        });
    </script>
	
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- 购物车 必须加  开始-->	
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/shoppingCarCover.css">
	<!-- 购物车 必须加 结束 -->
	<link href="${pageContext.request.contextPath}/css/foot.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/css/head2.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/css/shoppingCar2.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/myCenter2.css"/>
</head>
<body>
	<!--遮罩层 开始-->
	<c:import url="/shared/ShoppingCover.jsp" />
	<!--遮罩层 结束-->
	
	<div class="container">
	    <!-- 回到顶部 开始-->
		<c:import url="/shared/returnTop.jsp" />
	    <!--回到顶部 结束-->
	    
	    <!--导航-->
		<c:import url="/shared/header.jsp" />
	    <!--导航结束-->
	    
	    <c:if test="${not empty sessionScope.user }">
			<!--购物车按钮 开始-->
			<c:import url="/shared/shoppingCarBtn.jsp" />
			<!--购物车按钮 结束-->
		</c:if>
	    
	    <!--中间部分-->
	    <div class="row">
	        <!--内容  小伙伴请补充-->
	        <div class="col-md-10">
	            <!--这里写内容-->
	            <div class="ycy-mc-panel">
	                <div class="tabbable" id="tabs-220713">
	                	<c:set var="userInfo" value="${sessionScope.user}"/>
	                    <ul class="nav nav-tabs">
	                        <li class="active">
	                            <a href="#panel-468001" data-toggle="tab">我的订单</a>
	                        </li>
	                        <li>
	                            <a href="#panel-13026" data-toggle="tab">我的地址</a>
	                        </li>
	                    </ul>
	                    <div class="tab-content">
	                        <!--我的订单-->
	                        <div class="tab-pane active" id="panel-468001">
	                        	<c:choose>
		                        	<c:when test="${not empty userInfo.orderList }">
			                        	<c:forEach var="order" items="${userInfo.orderList }">
				                            <dl class="ycy-mc-orderdl">
				                                <dt>
				                                    <span>订单日期：</span>
				                                    <span>${order.orderDate }</span>
				                                    <span class="ycy-mc-orderdl-status">${order.orderState.orderStateName }</span>
				                                </dt>
				                                <c:forEach var="orderDet" items="${order.orderDetail}">
					                                <dd class="ycy-mc-orderdl-info">
					                                    <img src="image/foods/${orderDet.rate.food.imageFile }" height="100" width="100">
					                                    <span>${orderDet.rate.food.foodName }</span>
					                                    <span>（${orderDet.rate.foodSize.foodSizeName }）</span>
					                                    <span>&yen;<span>${orderDet.rate.ratioPrice }</span></span>
					                                    <span>x<span>${orderDet.foodCount }</span></span>
					                                </dd>
				                                </c:forEach>
				                                <dd class="ycy-mc-orderdl-total">
				                                    <span>合计：</span>
				                                    &yen;<span>${order.totalPrice }</span>
				                                </dd>
				                            </dl>
			                            </c:forEach>
		                            </c:when>
	                            	<c:otherwise>
	                            		<div style="color:white;font-size:16px;">没有任何订单记录 </div>
	                            	</c:otherwise>
	                            </c:choose>
	                        </div>
	                        <!--我的地址-->
	                        <div class="tab-pane" id="panel-13026">
	                        	<c:choose>
	                        		<c:when test="${not empty userInfo.addressList}">
			                        	<c:forEach var="address" items="${userInfo.addressList }">
				                            <div class="ycy-mc-address">
				                                <div class="ycy-mc-address-base">
				                                    <span>${userInfo.userName }</span>
				                                    <span class="ycy-mc-address-base-phone">${userInfo.phone }</span>
				                                </div>
				                                <div class="ycy-mc-address-info">
				                                    <span class="ycy-mc-address-info-details">${address.completeAddress}</span>
				                                </div>
				                            </div>
			                            </c:forEach>
		                            </c:when>
		                            <c:otherwise>
		                            	<div style="color:white;font-size:16px;">没有任何地址信息</div>
		                            </c:otherwise>
	                            </c:choose>
	                            <div class="ycy-mc-address-addbtn">
	                                <button>增&nbsp;加&nbsp;地&nbsp;址</button>
	                            </div>
	                            <div class="ycy-mc-address-add">
	                                <form action="EditAddress" method="post" id="addressInfo">
	                                	<input type="hidden" value="${userInfo.cusId }" name="cusId"/>
	                                    <p>
	                                        <span>地区：</span>
	                                        <c:set var="aList" value="${requestScope.areaList}"/>
	                                        
	                                        <select id="area">
	                                        	<c:forEach var="area" items="${aList}">
		                                            <option value="${area.areaId}">${area.areaName}</option>
	                                            </c:forEach>
	                                        </select>
	                                        <span>街道：</span>
	                                        <c:set var="area01" value="${aList[0]}"/>
	                                        <select name="street" id="street">
	                                        	<c:forEach var="street" items="${area01['streetList']}">
	                                            	<option value="${street.strId }">${street.streetName}</option>
	                                            </c:forEach>
	                                        </select>
	                                    </p>
	                                    <p class="ycy-mc-address-add-detail">
	                                        <span>详细地址：</span>
	                                        <input type="text" name="address"/>
	                                    </p>
	                                    <p class="ycy-mc-address-add-btn">
	                                        <button id="saveAddress">保&nbsp;存</button>
	                                    </p>
	                                </form>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <!--内容结束-->
	    </div>
	    <!--中间部分结束-->
	    
	    <!--尾部-->
		<c:import url="/shared/footer.jsp" />
		<!--尾部结束-->
	</div>

</body>
</html>